<template>
	<view>
		<view class="actionList">
			<input type="text" style="width: 0; height: 0; position: absolute; z-index: -1;" />
			
			<input type="password" style="width: 0; height: 0; position: absolute; z-index: -1;" />
			<view class="formGroup">
			<view class="formItem">
				<view class="formLabel">手机号</view>
				<input type="number" placeholder="请输入注册手机号" autocomplete="off" class="wq-ipt1" v-model="phone"></input>
			</view>
			<view class="formItem">
				<view class="formLabel">滑动验证</view>
				<view class="verify"><wq-verify-full   @blockSuccess="codeCanSend=true"></wq-verify-full></view>
			</view>
			<view class="formItem">
				<view class="formLabel">验证码</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
				<input type="number"   placeholder="验证码" autocomplete="off" class="wq-ipt1 codeIpt" v-model="code"></input>
				<view>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<view class="wqLButton" @tap="getCode">{{tips}}</view>
				</view>
				</view>
			</view>
			<view class="formItem">
				<view class="formLabel">新密码</view>
				<input type="password" placeholder="请输入新密码" autocomplete="off" class="wq-ipt1" v-model="password2"></input>
			</view>
			<view class="formItem">
				<view class="formLabel">再次输入</view> 
				<input type="password" placeholder="请输入新密码" autocomplete="off" class="wq-ipt1" v-model="password3"></input>
			</view>
			<view class="formItem">
			<button class="wq-btn" @tap="save">保存</button>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api.js'
	export default {
		data() {
			return {
				codeCanSend:false,
				tips:'',
				seconds:60,
				phone:'',
				code:'',
				password2:'',
				password3:'',
				codeCanSend:false
			}
		},
		onLoad(e){
			
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.codeCanSend){
					if (this.$refs.uCode.canGetCode) {
						
							if(this.phone!="" ){
								
								var sendData={phone:this.phone}
								
								
								uni.showLoading({
									title: '正在获取验证码'
								})
								api.doRequest("post", "login/sendCode", sendData).then(res => {
									//console.log(res);
								})
								setTimeout(() => {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.showToast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 500);
							}
							else{
								uni.showToast({
									title:"请检查您的手机号",
									icon:'none'
								})
							}
						
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('请拖动滑块后再发送');
				}
				
			},
			save(){
				if(this.phone=='' || this.code=='' || this.password2 == '' || this.password3== ''){
					uni.showToast({
						title:"请验证是否填写完整",
						icon:"none"
					})
				}else{
					if(this.password2!=this.password3){
						uni.showToast({
							title:"两次新密码输入不一致，请重新输入",
							icon:"none"
						})
					}else{
						api.doRequest("post",'login/forgetPwd',{phone:this.phone,code:this.code,password:this.password2}).then(res=>{

							
							console.log(res.data.code);
							if(res.statusCode==200 && res.data.code==200){
								uni.showToast({
									title:"重置成功",
									icon:"none"
								})
								setTimeout(function(){
									uni.reLaunch({
										url:'/pages/login/login'
									})
								},500);
								
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:"none"
								})
							}
						})
					}
				}
				
			}
		}
	}
</script>

<style>
.formGroup {
		width: 670upx;
		padding: 20upx;
		margin: 0upx auto;
		margin-bottom: 20upx;
		background: #fff;
		border-radius: 20upx;
	}
	.formLabel {
		font-size: 12px;
		margin: 20upx 0;
	}
	.formItem{
		margin-bottom:20upx;
	}
	.wq-ipt1{
		width:calc(100% - 20upx);border:1upx solid #ccc;height:80upx;border-radius:10upx;padding-left:20upx;
	}
	.codeIpt{width:410upx;}
	.verify{width:100%;}
</style>
